<template>
    <div class="common-layout">
      <el-container>
        <el-header height="100%">
          <HeaderView />
        </el-header>
        <el-main height="100%" style="background-color: #F5F5F5;">
          <div class="user-info-box">
            <div class="avatar-section">
              <img :src="userInfo.image" alt="用户头像" class="user-avatar" />
            </div>
            <div class="info-section">
              <h1>个人中心</h1>
              <table class="user-info-table">
                <tbody>
                  <tr>
                    <td>用户名</td>
                    <td>
                      <el-input v-model="editUsername" placeholder="修改用户名" />
                    </td>
                  </tr>
                  <tr>
                    <td>邮箱</td>
                    <td>
                      <el-input v-model="editEmail" placeholder="修改邮箱" />
                    </td>
                  </tr>
                  <tr>
                    <td>年龄</td>
                    <td>
                      <el-input v-model="editAge" placeholder="修改年龄" type="number" />
                    </td>
                  </tr>
                  <tr>
                    <td>性别</td>
                    <td>
                      <el-radio-group v-model="editGender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                      </el-radio-group>
                    </td>
                  </tr>
                  <tr>
                    <td>昵称</td>
                    <td>
                      <el-input v-model="editNickname" placeholder="修改昵称" />
                    </td>
                  </tr>
                  <tr>
                    <td>联系方式</td>
                    <td>
                      <el-input v-model="editContact" placeholder="修改联系方式" />
                    </td>
                  </tr>
                  <tr>
                    <td colspan="2" style="text-align: center;">
                      <el-button type="primary" @click="updateUserInfo" style="width: 200px;">保存</el-button>
                      <el-button type="default" @click="goToForgetPassword" style="margin-left: 20px; background-color: #B01F24; color: white;">更改密码</el-button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </el-main>
        <el-footer height="100%">
          <FooterView />
        </el-footer>
      </el-container>
    </div>
  </template>
  
  <script>
  import HeaderView from '@/view/HeaderView.vue';
  import FooterView from '@/view/FooterView.vue';
  import { mapGetters } from 'vuex';
  import req from '@/utils/request';
  import { useRouter } from 'vue-router'; // 导入 useRouter
  export default {
    name: 'UserInfo',
    components: {
      HeaderView,
      FooterView
    },
    data() {
      return {
        editUsername: '', // 用于编辑的用户名
        editEmail: '',     // 用于编辑的邮箱
        editAge: '',       // 用于编辑的年龄
        editGender: '',    // 用于编辑的性别
        editNickname: '',  // 用于编辑的昵称
        editContact: '',     // 用于编辑的联系方式
        editAvatar:'',

      };
    },
    computed: {
      ...mapGetters(['userInfo']) // 获取用户信息
    },
    mounted() {
      // 初始化编辑字段
      this.editUsername = this.userInfo.username;
      this.editEmail = this.userInfo.email;
      this.editAge = this.userInfo.age; // 假设 userInfo 中有年龄字段
      this.editGender = this.userInfo.gender === 1 ? '男' : '女'; // 将性别转换为字符串
      this.editNickname = this.userInfo.name; // 假设 userInfo 中有昵称字段
      this.editContact = this.userInfo.telephone; // 假设 userInfo 中有联系方式字段
      this.editAvatar = this.userInfo.image;
    },
    methods: {
      updateUserInfo() {
        // 这里可以添加请求将更新后的用户信息提交到后端
        const user = {
            uid:this.userInfo.uid,
          username: this.editUsername,
          email: this.editEmail,
          age: this.editAge,
          gender: this.editGender === '男' ? 1 : 0, // 将性别转换为 1 或 0
          name: this.editNickname,
          telephone: this.editContact,
            image:this.editAvatar
        };

        req.put('/user/update', user).then(res => {
            if (res.code === 200) {
                alert('信息更新成功');
                this.$store.dispatch('updateUserInfo', user);
                location.reload();
            } else {
                alert('信息更新失败');
            }
        });
      },
      goToForgetPassword() {
        // 跳转到忘记密码页面
        this.$router.push({ path: '/forget-password' }); // 假设路由路径为 '/forget-password'
      }
    }
  }
  </script>
  
  <style scoped>
  .user-info-box {
    display: flex;
    width: 1200px;
    margin: 20px auto;
    background-color: white;
    min-height: 500px;
    padding-top: 52px;
    align-items: center;
    margin-top: 100px;
  }
  
  .avatar-section {
    flex: 1; /* 左侧占据 1 份空间 */
    display: flex;
    justify-content: center; /* 水平居中 */
  }
  
  .info-section {
    flex: 2; /* 右侧占据 2 份空间 */
    padding-left: 20px; /* 左侧留出间距 */
  }
  
  .user-avatar {
    width: 200px; /* 设置头像大小 */
    height: 200px; /* 设置头像大小 */
    border-radius: 50%; /* 圆形头像 */
  }
  
  .user-info-table {
    width: 80%; /* 表格宽度 */
    border-collapse: collapse; /* 合并边框 */
    margin-top: 20px; /* 与上方内容的间距 */
  }
  
  .user-info-table td {
    border: 1px solid #ccc; /* 边框样式 */
    padding: 10px; /* 内边距 */
    text-align: left; /* 左对齐 */
  }
  </style> 